<template>
  <!--明细页面弹出框-->
  <el-dialog
    title="机构内部转账业务复核明细"
    center
    :visible.sync="open"
    width="1024px"
    :close-on-click-modal="true"
    @close="closeFn"
  >
    <el-form ref="detailsForm" :model="formData" label-width="140px" :rules="rules">
      <el-card class="form-card txnInfo-card">
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="交易流水号：" prop="id">
              <el-input v-model="formData.id" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="CPG日期：" prop="cpgdate">
              <el-date-picker
                v-model="formData.cpgdate"
                type="date"
                disabled
                value-format="yyyyMMdd"
                placeholder=""
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作日期：" prop="workdate">
              <el-date-picker
                v-model="formData.workdate"
                type="date"
                disabled
                value-format="yyyyMMdd"
                placeholder=""
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="来源：" prop="source">
              <el-select v-model="formData.source" placeholder="" style="width: 100%" disabled>
                <el-option
                  v-for="dict in dictMap.TXN_SOURCE"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="记账标志：" prop="cbflag">
              <el-select v-model="formData.cbflag" placeholder="记账标志" disabled style="width: 100%">
                <el-option
                  v-for="dict in dictMap.CBFLAG"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="业务类型：" prop="bizTypeCode">
              <el-select v-model="formData.bizTypeCode" placeholder="" disabled style="width: 100%">
                <el-option
                  v-for="dict in dictMap.BANK_BIZ_TYPE"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="form-card txnInfo-card">
        <el-row>
          <el-col :span="12">
            <el-form-item label="付款机构号：" prop="payerAgency">
              <el-input v-model="formData.payerAgency" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款机构名：" prop="payerBrname">
              <el-input v-model="formData.payerBrname" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="付款人开户机构号：" prop="payerAccBrno">
              <el-input v-model="formData.payerAccBrno" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款人开户机构名：" prop="payerAccBrname">
              <el-input v-model="formData.payerAccBrname" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="付款人账号：" prop="payerActno">
              <el-input v-model="formData.payerActno" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款人名称：" prop="payerName">
              <el-input v-model="formData.payerName" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="付款人地址：" prop="payerAddr">
              <el-input v-model="formData.payerAddr" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="form-card txnInfo-card">
        <el-row>
          <el-col :span="12">
            <el-form-item label="收款人账号：" prop="payeeActno">
              <el-input v-model="formData.payeeActno" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款人名称：" prop="payeeName">
              <el-input v-model="formData.payeeName" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="收款人地址：" prop="payeeAddr">
              <el-input v-model="formData.payeeAddr" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="收款机构号：" prop="payeeAgency">
              <el-input v-model="formData.payeeAgency" placeholder=""  />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款机构名：" prop="payeeBrname">
              <el-input v-model="formData.payeeBrname" placeholder="" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="收款人开户机构号：" prop="payeeAccBrno">
              <el-input v-model="formData.payeeAccBrno" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款人开户机构名：" prop="payeeAccBrname">
              <el-input v-model="formData.payeeAccBrname" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="form-card txnInfo-card">
        <el-row>
          <el-col :span="12">
            <el-form-item label="交易货币：" prop="curcd">
              <el-input v-model="formData.curcd" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="金额：" prop="amount">
              <ht-amount-input v-model="formData.amount" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-otherInfo">
              <el-form-item label="附言：" prop="remarks">
                <el-input type="textarea" v-model="formData.remarks" placeholder="" disabled />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="form-card txnInfo-card">
        <el-row>
          <el-col :span="12">
            <el-form-item label="录入操作员：" prop="mdTlrno">
              <el-input v-model="formData.mdTlrno" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="录入时间：" prop="mdTime">
              <el-date-picker
                v-model="formData.mdTime"
                type="datetime"
                value-format="yyyyMMddHHmmss"
                placeholder=""
                disabled
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-otherInfo">
              <el-form-item label="复核附言：" prop="ckRemarks">
                <el-input type="textarea" v-model="formData.ckRemarks" placeholder="" maxlength="128" show-word-limit/>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="approve" :loading="isLoading">复核</el-button>
      <el-button type="danger" @click="reject" :loading="isLoading">拒绝</el-button>
      <el-button @click="closeFn">关闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { review, approve, reject } from "@/api/cnaps/baseBiz/interTransfer/inside_transfer_review.js";
import HtAmountInput from "@/views/components/HtAmountInput";
export default {
  name: "InsideTransferReviewDetails",
  components: { HtAmountInput },
  props: {
    dictMap: {
      type: Object,
      default: () => {
        return {};
      },
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      // 是否显示弹出层
      open: false,
      isLoading: false,
      // 表单校验
      rules: {
        payerActno: [{ required: true, message: "不能为空", trigger: "blur" },{ max:32, message: "长度最大为32位", trigger: "blur" }],
        payeeActno: [{ required: true, message: "不能为空", trigger: "blur" },{ max:32, message: "长度最大为32位", trigger: "blur" }],
        payeeAgency: [{ required: true, message: "不能为空", trigger: "blur" },{ max:14, message: "长度最大为14位", trigger: "blur" }],
        amount: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
    };
  },
  mounted() {},
  methods: {
    //审核
    approve() {
      this.$refs["detailsForm"].validate((valid) => {
        if (valid) {
          this.isLoading = true;
          review({
           ...this.formData
          }).then((res) => {
            this.isLoading = false;
            this.$emit("editComplete", true);
            this.msgSuccess("成功!");
            this.closeFn();
          }).catch((err) => {
            this.isLoading = false;
          });
        }
      });
    },
    //拒绝
    reject() {
      this.isLoading = true;
      reject({ ...this.formData })
        .then((res) => {
          this.isLoading = false;
          this.$emit("editComplete", true);
          this.msgSuccess("成功!");
          this.closeFn();
        })
        .catch((err) => {
          this.isLoading = false;
          //   this.$alert(`${res.result}`, "系统提示", {
          //     confirmButtonText: "确认",
          //     type: "error",
          //     callback: (action) => {},
        });
    },
    // 表单重置
    reset() {
      this.resetForm("detailsForm");
    },
    closeFn() {
      this.open = false;
      this.reset();
    },
    show() {
      this.open = true;
    },
  },
};
</script>
<style>
.label-header-msg {
  font-weight: bold;
}

.form-card {
  margin-bottom: 10px;
}
</style>
